import { useState } from 'react';
import './App.css'
import { EntrypointPage } from './components/ConnectionRestored';
import { Counters } from './components/Counter';

import { Transactions } from './components/Transactions';
import { Header } from './components/Header'

import { useTonWallet , Locales, useTonConnectUI, THEME   } from '@tonconnect/ui-react'
import CallSmartContract from './components/CallSmartContract';
import { Balance } from './components/Balance';

function App() {
  const wallet:any = useTonWallet();

  const [tonConnectUI, setOptions] = useTonConnectUI();
  const onLanguageChange = (language: Locales) => {
    setOptions({ language:language,uiPreferences:{
      theme:THEME.DARK
    }});
  };

  

  return (
    <>
      <Header />
      <Balance />
      <br />
      <Counters />
      <div>
        <br />
        内容
        
      </div>
      <div className='wallet_con'>
      {
        wallet && (
          <div>
            <p>Connected wallet address: {wallet.account.address}</p>
            <p>Device: {wallet.device.appName}</p>
            <p>Connected via: {wallet.provider}</p>
            {wallet.connectItems?.tonProof?.proof && <span>Ton proof: {wallet.connectItems.tonProof.proof}</span>}
            <div>Connected wallet info:{wallet.name}</div>
            <div>
              <img src={wallet.imageUrl} />
            </div>
          </div>
        )
      }
      <div>
      <label>language</label>
        <select onChange={(e) => onLanguageChange(e.target.value as Locales)}>
          <option value="en">en</option>
          <option value="ru">ru</option>
        </select>
      </div>
      </div>
      <EntrypointPage />
      <Transactions />

      <br />
      <CallSmartContract />
    </>
  )
}

export default App
